<template>
<div class="answerBase">
  <div class="homeHeader">
    <el-button type="primary" @click="data.dialogVisible = true">
      <el-icon><Plus /></el-icon> 新增知识库</el-button>
  </div>

  <el-table :data="subjectList" :border="true" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <div class="subjectDetail">
          <el-form label-width="120px" >
            <el-form-item label="题目名称：" prop="subject" :show-overflow-tooltip="true">
              {{props.row.subject}}
            </el-form-item>
            <el-form-item label="题目类型：" prop="subject">
              {{props.row.subjectType == 1 ? '选择题': '阅读题'}}
            </el-form-item>
            <el-form-item label="选项：" prop="subject" v-if="props.row.subjectType == 1">
              <el-col :span="12">A: {{props.row.answerA}}</el-col>
              <el-col :span="12">B: {{props.row.answerB}}</el-col>
              <el-col :span="12">C: {{props.row.answerC}}</el-col>
              <el-col :span="12">D: {{props.row.answerD}}</el-col>
            </el-form-item>
            <el-form-item label="注解：" prop="subject">
              {{props.row.analysis}}
            </el-form-item>
          </el-form>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="题目" prop="subject" align="center" />
    <el-table-column label="答案" prop="answer" align="center" width="100px" />
    <el-table-column label="题型" prop="subjectType" align="center" width="100px">
      <template #default="props">{{props.row.subjectType == 1 ? '选择题': '阅读题'}}</template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="120" align="center">
      <template #default="props">
        <el-button link type="primary" size="small" @click="itemDetail(props.row.answerId)">Detail</el-button>
        <el-button link type="primary" size="small">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>


  <el-dialog v-model="data.dialogVisible"
             :title=" data.isEditBase ? '编辑知识库':'新增知识库'"
             style="max-width: 500px"
             :before-close="handleClose">
    <el-form ref="ruleFormRef" :rules="rules" :model="data.from" label-width="120px" style="max-width: 500px">
      <el-form-item label="题目名称：" prop="subject">
        <el-input v-model="data.from.subject" :type="data.from.subjectType == 1?'text':'textarea'" placeholder="请填写题目名称" />
      </el-form-item>
      <el-form-item label="题目类型：" prop="subjectType">
        <el-radio-group v-model="data.from.subjectType" @change="selectSubjectType">
          <el-radio :label="1">选择题</el-radio>
          <el-radio :label="2">阅读题</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选项：" prop="position" v-if="data.from.subjectType == 1">
        <el-col :span="12">
          <el-input class="options" type="textarea" v-model="data.from.answerA" placeholder="A" />
        </el-col>
        <el-col :span="12">
          <el-input class="options" type="textarea" v-model="data.from.answerB" placeholder="B" />
        </el-col>
        <el-col :span="12">
          <el-input class="options" type="textarea" v-model="data.from.answerC" placeholder="C" />
        </el-col>
        <el-col :span="12">
          <el-input class="options" type="textarea" v-model="data.from.answerD" placeholder="D" />
        </el-col>
      </el-form-item>
      <el-form-item label="答案：" prop="answer" v-if="data.from.subjectType == 1">
        <el-input v-model="data.from.answer" placeholder="请填写题目答案" />
      </el-form-item>
      <el-form-item label="注解：" prop="analysis" v-if="data.from.subjectType == 1">
        <el-input type="textarea" v-model="data.from.analysis" placeholder="请填写题目答案" />
      </el-form-item>
      <div class="footerBut">
        <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
      </div>
    </el-form>
  </el-dialog>
</div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import { useRouter }  from  'vue-router'
import api from "../api";
import {ElMessage, ElMessageBox} from "element-plus";

const router = useRouter()

const data = reactive({
  isEditBase: false,
  dialogVisible: false,
  from:{
    baseId: null,
    subject: '',
    answerA: null,
    answerB: null,
    answerC: null,
    answerD: null,
    answer: '',
    analysis: '',
    subjectType: 1
  }
})
data.from.baseId = router.currentRoute.value.query.id

let ruleFormRef = ref()
const rules = reactive({
  subject: [
    { required: true, message: '请选择知识库类型', trigger: 'blur' },
  ],
  options: [
    { required: true, message: '请选择知识库类型', trigger: 'blur' },
  ],
  answer: [
    { required: true, message: '请选择知识库类型', trigger: 'blur' },
  ],
  analysis: [
    { required: true, message: '请选择知识库类型', trigger: 'blur' },
  ],
})
let subjectList = ref([])

//  方法 事件
onMounted( () => {
  getSubjectList()
})

const getSubjectList = () => {
  api.getSubjectList({id: data.from.baseId}).then(res => {
    subjectList.value = res.data.data
    data.dialogVisible = false
  })
}

const handleClose = () => {
  data.dialogVisible = false
  data.isEditBase = false
  if (!ruleFormRef.value) return
  ruleFormRef.value.resetFields()
  data.from = {
    baseId: null,
    subject: '',
    answerA: null,
    answerB: null,
    answerC: null,
    answerD: null,
    answer: '',
    analysis: '',
    subjectType: 1
  }
}

const selectSubjectType = (event) => {
  console.log(event)
  data.from.subjectType = event
}

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      // if (data.isEditBase) {
      //   renewBase()
      //   return
      // }
      console.log(data.from)
      api.getAddSubject(data.from).then(() => {
        ElMessage({
          message: '新增成功'
        })
        getSubjectList()
        data.dialogVisible = false
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const itemDetail = (answerId) => {
  console.log(answerId)
  ElMessageBox.alert('确认删除该条数据', '提示', {
    confirmButtonText: '确认',
    callback: () => {
      api.delSubject({answerId: answerId}).then(() => {
        ElMessage({
          message: '删除成功'
        })
        getSubjectList()
      })
    },
  })

}
</script>

<style scoped lang="scss">
.homeHeader{
  padding: 10px 20px 20px;
  border-bottom: 1px solid #eee;
}
.options{
  margin-right: 5px;
}
.subjectDetail{
  margin: 0 50px;
}
.footerBut{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>